import React, { useEffect, useState } from 'react';
import { Row, Col, Icon, Input, Menu, message } from 'antd';
import AxCard from '@/components/AxBase/AxCard';
import './style.css'
import { AxButton, AxParagraph } from '@/components/AxBase';
import { AxCardListBx } from '@/components/AxCardList';
import { router } from 'umi';
import Qualification from './components/qualification';
import { axconst } from '@/shared/axconst';
import { axurl } from '@/shared/axurl';
import { axhttp } from '@/shared/axhttp';

const { Search } = Input;
const url = axurl.material.goods.store;
const { getListX, getX } = axhttp;
const Purchase: React.FC<any> = props => {
    const [selectedKeys, setSelectedKeys] = useState<any>(['supply']);
    const [qualificationVisible, setQualificationVisible] = useState(false);
    const [data, setData] = useState([]);

    useEffect(() => {
        handleRead();
    }, []);

    const handleRead = () => {
        getListX(url.read).then((res: any) => {
            setData(res.list.map((m: any, idx: any) => (
                {
                    id: idx + 1,
                    img: <img src={(m.logoSrc) && (m.logoSrc) !== '' && (m.logoSrc) || '/img/nopic.jpg'} style={{ height: 110, width: 110 }} />,
                    desc: (
                        <>
                            <AxParagraph style={{ marginBottom: 0, fontWeight: 'bold' }}>{m.name}</AxParagraph>
                            <AxParagraph style={{ marginBottom: 0 }}>地址：{m.businessAddress}</AxParagraph>
                            <AxParagraph style={{ marginBottom: 0 }}>联系人：{m.contactPerson}</AxParagraph>
                            <AxParagraph style={{ marginBottom: 0 }}>联系电话：{m.contactPhone}</AxParagraph>
                        </>
                    ),
                    click: () => router.push({ pathname: '/buyer/material/goods/store/goods' }),
                    actions: [{
                        text: '查看资质',
                        click: (e: any) => {
                            if (e) e.stopPropagation();
                            setQualificationVisible(true);
                        }
                    }, {
                        text: '关注',
                        click: (e: any) => {
                            if (e) e.stopPropagation();
                            handleKeep(m.id);
                        }
                    }, {
                        text: '查看产品',
                        click: (e: any) => {
                            if (e) e.stopPropagation();
                            router.push({ pathname: '/buyer/material/goods/store/goods' });
                        }
                    }]
                })));
        });
    }

    const handleKeep = (supplierId: any) => {
        getX(url.keep, { supplierId, iskeep: true }).then((res: any) => {
            message.success('关注成功');
        });
    }

    const qualificationProps = {
        visible: qualificationVisible,
        handleVisible: setQualificationVisible,
    }

    return (
        <>
            <AxCard
                style={{ marginBottom: '15px', height: '100%', width: 1390, margin: '24px auto' }}
                bodyStyle={{ padding: 0 }}
            >
                <Row>
                    <Col span={6}>
                        {/* <img src='/img/logo.png' style={{ backgroundColor: '#1ca9e6' }} /> */}
                    </Col>
                    <Col span={12}>
                        <Search
                            placeholder="请输入商品名称、别名搜索"
                            onSearch={(val: any) => { }}
                            allowClear
                        />
                        {/* <p style={{ marginTop: 4 }}>可输入商品名称、别名</p> */}
                    </Col>
                    <Col span={6}>
                        <AxButton className='ax-no-class' style={{ marginLeft: 30 }} ghost onClick={() => router.push('/buyer/material/cart/data')} >我的购物车<Icon type="shopping-cart" /></AxButton>
                    </Col>
                </Row>
            </AxCard>
            <div style={{ borderBottom: '2px solid #409eff' }}>
                <AxCard
                    style={{ marginBottom: 15, height: '100%', width: 1390, margin: '0 auto' }}
                    bodyStyle={{ padding: 0 }}
                >
                    <Menu
                        theme="light"
                        mode="horizontal"
                        selectedKeys={selectedKeys}
                        // style={{ lineHeight: `${axconst.header.height - 2}px`, float: 'right', backgroundColor: '#409eff' }}
                        onClick={({ key }) => setSelectedKeys([key])}
                    >
                        <Menu.Item key='all' onClick={() => router.push('/material/goods/data')}>
                            <Icon type="unordered-list" />
                        全部商品分类
                    </Menu.Item>
                        <Menu.Item key='supply' onClick={() => router.push('/material/goods/store')}>
                            供应商
                    </Menu.Item>
                    </Menu>
                </AxCard>
            </div>
            <AxCard
                style={{ marginBottom: '15px', height: '100%', width: 1390, margin: '24px auto' }}
                bodyStyle={{ paddingLeft: 0, paddingRight: 0 }}
            >
                <AxCardListBx showAction={true} data={data} />
            </AxCard>
            {qualificationVisible && <Qualification {...qualificationProps} />}
        </>
    );
};

export default Purchase;